import { EyeTwoTone, EyeInvisibleOutlined } from '@ant-design/icons';
import { Modal, Form, Input } from 'antd';
import React, { ReactElement } from 'react';
import { verifyNull, verifyAccountPwd, verifyUserPwd } from 'utils/tools';
import { encryptStr } from 'utils/tools';

interface Props {
  /**弹窗显示隐藏 */
  visible: boolean;
  /**回调：请求提交接口 */
  submitFn: (newPassword: string, old?: string) => void;
  /**回调：隐藏弹窗 */
  closeFn: () => void;
  /**用户名:重置密码-需传入，修改密码-不需要*/
  userName?: string;
  /**是否强制修改密码 */
  forceReset?: boolean;
}
/**
 * 重置密码弹窗组件
 *
 * @export
 * @param {Props} { visible, submitFn, closeFn }
 * @return {*}  {ReactElement}
 */
export default function ResetPassword({
  visible,
  submitFn,
  closeFn,
  userName,
  forceReset,
}: Props): ReactElement {
  const [resetForm] = Form.useForm();

  /**
   *关闭
   */
  function handleClose() {
    resetForm.resetFields();
    closeFn();
  }
  /**
   *确定提交
   */
  function handleSubmit() {
    resetForm.validateFields().then(async ({ newPwd, oldPwd }) => {
      // newPwd = encryptStr(newPwd);
      // if (oldPwd) {
      //   oldPwd = encryptStr(oldPwd);
      // }
      await submitFn(newPwd, oldPwd);
      handleClose();
    });
  }
  const formLayout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 18 },
  };

  return (
    <Modal
      width={700}
      visible={forceReset || visible}
      title={!userName ? '修改密码' : '重置密码'}
      cancelButtonProps={{ style: { display: forceReset ? 'none' : 'inline-block' } }}
      closable={!forceReset}
      maskClosable={false}
      onCancel={handleClose}
      onOk={handleSubmit}
    >
      <Form form={resetForm} {...formLayout}>
        {!userName && (
          <Form.Item
            label="原始密码"
            name="oldPwd"
            rules={verifyNull()}
            getValueFromEvent={event => {
              return event.target.value.replace(/\s+/g, '');
            }}
          >
            <Input.Password placeholder="请输入原始密码" maxLength={30} />
          </Form.Item>
        )}
        <Form.Item
          label="新密码"
          name="newPwd"
          rules={!userName ? verifyAccountPwd : verifyUserPwd(userName)}
          validateFirst={true}
          getValueFromEvent={event => {
            // 圆点符号包含逗号，所以过滤逗号需单独处理
            return event.target.value
              .replace(/,+/g, '')
              .replace(/[^a-zA-Z0-9~@#\$*%\^:;_.+-\/]+/g, '')
              .slice(0, 30);
          }}
        >
          <Input.Password
            minLength={8}
            maxLength={30}
            placeholder="8位以上字符，需包含大写字母、小写字母、数字和特殊字符中的三类"
            iconRender={visible => (visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />)}
          />
        </Form.Item>
        <Form.Item
          label="确认密码"
          name="confirmPwd"
          dependencies={['newPwd']}
          rules={[
            { required: true, message: '请再次输入新密码' },
            ({ getFieldValue }) => ({
              validator(_, value) {
                if (!value || getFieldValue('newPwd') === value) {
                  return Promise.resolve();
                }
                return Promise.reject(new Error('两次输入的密码不一致'));
              },
            }),
          ]}
          getValueFromEvent={event => {
            // 圆点符号包含逗号，所以过滤逗号需单独处理
            return event.target.value
              .replace(/,+/g, '')
              .replace(/[^a-zA-Z0-9~@#\$*%\^:;_.+-\/]+/g, '')
              .slice(0, 30);
          }}
        >
          <Input.Password
            placeholder="请再次输入新密码"
            minLength={8}
            maxLength={30}
            iconRender={visible => (visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />)}
          />
        </Form.Item>
      </Form>
    </Modal>
  );
}
